<template>
  <div class="information-panel">
    <h2 class="title" :class="!showInformation ? 'hide' : ''" @click="changeShow">
      <span>{{$t('webchat.historyVisitList')}}</span>
      <i class="icon el-icon-arrow-down" v-show="!showInformation"></i>
      <i class="icon el-icon-arrow-up" v-show="showInformation"></i>
    </h2>
    <div class="information" v-show="showInformation">
      <div class="visit_info">
        <div class="box" v-for="(item, index) in visitInfoList" :key="item.text + index">
          <span class="visitTitle">{{item.time}}</span>
          <span class="from" v-html="item.text"></span>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
    import {deepClone} from '@/utils/m7Utils'
    export default {
      name: 'history-visit-list',
      props: {
        webchatData: Object,
        chatInfo: Object
      },
      data () {
        return {
          showInformation: false
        }
      },
      computed: {
        tabType () {
          let arr = this.$route.path.split('/')
          return arr[3]
        },
        visitInfoList () { // 访问信息历史
          if (!(this.tabType === 'webchat_todo' || this.tabType === 'webchat_all' || this.tabType === 'webchat_laterProcess' || this.tabType === 'webchat_queue')) {
            return []
          }
          let temp = deepClone(this.tabType === 'webchat_todo' ? this.$store.state.webchat.current.webchat_todo.visitInfoList[this.webchatData._id] : this.$store.state.webchat.current[this.tabType].visitInfoList)
          if (temp && temp.length) {
            temp.forEach((item) => {
              let pcTitle = item.urlTitle ? item.urlTitle : this.$t('webchat.WebConsultation')
              let pcHtml = '<a href="' + item.fromUrl + '" target="_blank">' + pcTitle + '</a>'
              item.text = item.platform === 'wap' ? this.$t('webchat.WapConsultation') : item.platform === 'sdk' ? this.$t('webchat.SdkConsultation') : item.platform === 'weixin' ? this.$t('webchat.WeiXinConsultation') : item.platform === 'wxmini' ? this.$t('webchat.WxminiConsultation') : item.platform === 'dy' ? this.$t('webchat.platformTikTok') : item.platform === 'wxkf' ? this.$t('webchat.platformWXKF') : item.platform === 'weibo' ? this.$t('webchat.WeiboConsultation') : pcHtml
            })
          }
          return temp || []
        }
      },
      methods: {
        changeShow () {
          this.showInformation = !this.showInformation
          if (this.showInformation) {
            window._hmt && window._hmt.push(['_trackEvent', '在线咨询', 'PM-历史访问记录'])
          }
        }
      }
    }
</script>

<style lang="stylus" scoped>
  @import "./../../../../../assets/common.styl"
  .information-panel
    padding-top 20px
    padding-left 20px
    padding-right 20px
    .title
      font-size 14px
      font-weight 600
      color $cf-gray3
      cursor pointer
      .icon
        margin-left 5px
        font-size 11px
        color $cf-level4
    .hide
      padding-bottom 20px
      border-bottom solid 1px #d9d9d9
  .information
    padding-top 8px
    padding-bottom: 20px;
    .box
      margin-top  6px
    .from
      float right
    .visitTitle
      color $cf-gray3
      font-style normal
      font-size 12px
</style>
